<!DOCTYPE html>
<html lang="ch">
	<meta charset="utf8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
<head>
	<title>线索上传</title>
	<style type="text/css">
		.layui-input{

			border:1px solid rgb(180,180,180);
		}
	</style>
</head>
<body>
	<div class="layui-filuid" style="padding: 50px;">
		<div class="layui-row">
			<h1>微信公众号线索提交表单</h1>
			<br>
		</div>
		<div class="layui-row">
			<div id="countI">今日提交线索：</div>
		</div>
		<br>
		<div class="layui-row">
			<div class="layui-col-md6">
				<form class="layui-form" action="">
				  <div class="layui-form-item">
				    <label class="layui-form-label">联系方式</label>
				    <div class="layui-input-block">
				      <input type="text" name="tel" required  lay-verify="required" id="phone"  autocomplete="off" class="layui-input" onblur="if(!value.match(/\d{11}/ig,'')){this.value='';layer.msg('电话号码不正确')}" >
				      <!-- pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" -->
				    </div>
				  </div>
  				  <div class="layui-form-item">
				    <label class="layui-form-label">姓名</label>
				    <div class="layui-input-block">
				      <input in='name' type="text" name="realname"  autocomplete="off" class="layui-input">
				    </div>
				  </div>
  				  <div class="layui-form-item">
				    <label class="layui-form-label">城市</label>
				    <div class="layui-input-block">
				      <input type="text" id="city" name="city" required  lay-verify="required"  autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">备注</label>
				    <div class="layui-input-block">
				      <input type="text" id="city" name="remark" required  lay-verify="required"  autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item" style="display: none">
				    <label class="layui-form-label">类型</label>
				    <div class="layui-input-block">
				      <input type="text" name="type" required  lay-verify="required" value="2" autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				  	<div class="layui-upload">
					  <button type="button" class="layui-btn" id="test1">上传图片</button>
					  <p>
					  	<br>
					  	图片的文件名称是电话号码 例： 18801263889.jpg 或 18801263889.png
					  	<br>
					  </p>
					  <div class="layui-upload-list">
					    <!-- <img class="layui-upload-img" id="demo1" style="width:150px;height:150px">
					    <p id="demoText"></p> -->
					  </div>
					</div> 
				  </div>

				  <div class="layui-form-item">
				    <div class="layui-input-block">
				      <button type="submit" id="sub" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
				      <button type="reset"  class="layui-btn layui-btn-primary">重置</button>
				    </div>
				  </div>
				</form>
			</div>	
		</div>
	</div>

</body>
<script type="text/javascript" src="../layui/layui.all.js"></script>
<script type="text/javascript">

	upload = layui.upload;
	layer=layui.layer;
	form=layui.form;


	uplod()



	  //普通图片上传
	function uplod(){

	  	var uploadInst = upload.render({
		    elem: '#test1'
		    ,url: 'ttapi.php' //改成您自己的上传接口
		    ,data:{type:1}
		    ,bindAction:'#sub'
		    ,auto: false
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      // obj.preview(function(index, file, result){
		      //   $('#demo1').attr('src', result); //图片链接（base64）
		      //   //console.log(result)
		      // });
		    }
		    ,done: function(res){
		      //如果上传失败
		      if(res.code > 0){

		        return layer.msg('上传失败');

		      }else{

		      	//return layer.msg('上传成功');

		      }
		      //上传成功
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      // var demoText = $('#demoText');
		      // demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      // demoText.find('.demo-reload').on('click', function(){
		      //   uploadInst.upload();
		      // });
		    }
	  	});
  	}


	form.on('submit(demo1)', function(data){

		
		console.log(data.field)

		
		$.post('ttapi.php',data.field,function(data,status){

			console.log(data)

			data=JSON.parse(data)

			layer.msg(data.msg);

			getCount()

		})


		return false;
	});

	getCount()

	function getCount(){

		$.post('ttapi.php',{type:3},function(data,status){

			//console.log('返回：'+data)

			data=JSON.parse(data)


			$('#countI').html('<br>今日提交线索：'+data['data'][0]['count']+'个<br>')
		})



	}
	
</script>